<template>
<view class="header-wapper" style="flex-shrink: 0;" :style="{'height':state.heightwapper.height+'px' }">
	<view class="fixed"  :style="`background-color:${bgcolor} ;`">
		<view class="status-bar-height"  >
		
		</view>
		<view class="bot">
		
			
			
		
			<view class="left" @tap="back" v-if="!noqd">
				   <text class="sicon-back"  />
				
			</view>
			<view class="left" v-else>
				
			</view>
		
			
		
		
			<view class="title" v-if="title">
				{{title}}
			</view>
			<view class="" v-else  style="" >
				<slot name="mid"></slot>
			</view>
		
			<view class="ss-flex ss-row-right" style="" >
				<slot name="right"></slot>
			</view>
		
		</view>
		<view >
				<slot></slot>
		</view>

	</view>
	
	</view>
</template>

<script setup>
import { onMounted, reactive } from 'vue';
	let props = defineProps(['bgcolor', 'title', 'noqd','color', 'closeleft'])
	let state=reactive({
		heightwapper:{}
	}) 


	function back() {
		const canNavBack = getCurrentPages()

		//判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
		if (canNavBack && canNavBack.length > 1) {
			uni.navigateBack({
				delta: 1
			})
		} else {
			history.back()
		}


	}
	onMounted(()=>{
		layoutInfo()
	})
	async function layoutInfo() {
			
			
	
			
			state.heightwapper = await $uGetRect(".fixed")
	
		
		}
	function $uGetRect(selector, all) {
			return new Promise((resolve) => {
				uni.createSelectorQuery()
					.in(this)[all ? 'selectAll' : 'select'](selector)
					.boundingClientRect((rect) => {
						if (all && Array.isArray(rect) && rect.length) {
							resolve(rect)
						}
						if (!all && rect) {
							resolve(rect)
						}
					})
					.exec()
			})
		}
</script>

<style lang="scss" scoped>
	
	
	.fixed {
		background-color:#fff;
	}
	.fixed{
		width: 100%;
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
	}
	
	
	
	// .kf {
	// 	width: 35rpx;
	// 	height: 35rpx;
	
	// }
	
	.bot {
	
		>view:nth-child(1),
		>view:nth-child(3) {
			width: 10%;
		}
	
		>view:nth-child(2) {
			width: 80%;
		}
	
		padding:20rpx 33rpx;
	
		display: flex;
		align-items: center;
	
		justify-content: space-between;
	
		.title {
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #000;
			line-height: 42rpx;
		}
	
		.right .left {
			width: 30%;
			width: 50rpx;
		}
	
		.left {
			.icon {
				width: 35rpx;
				height: 35rpx;
			}
		}
	
		.right {
			justify-content: flex-end;
			display: flex;
	
			.kf {
				margin-right: 20rpx;
			}
		}
	}
</style>
